hanye-website/pages/products/[id].vue

<template>
  <div>
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-12">
        <!-- 加载中 -->
        <div
          class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"
        ></div>
      </div>

      <div v-else>
        <!-- 面包屑导航 -->
        <div class="max-w-full mb-6 xl:px-2 lg:px-2 md:px-4 px-4 mt-6">
          <div class="max-w-screen-2xl mx-auto">
            <nuxt-link
              to="/"
              class="justify-start text-white/60 text-base font-normal"
              >ホーム</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <nuxt-link
              to="/products"
              class="text-white/60 text-base font-normal"
              >製品一覧</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <nuxt-link
              v-if="product?.category"
              :to="`/products?category=${encodeURIComponent(product.category)}`"
              class="text-white/60 text-base font-normal"
              >{{ product.category }}</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <span class="text-white text-base font-normal">{{
              product?.title || product?.name
            }}</span>
          </div>
        </div>

        <!-- 产品详情内容 -->
        <div
          v-if="product"
          class="max-w-full mb-12 md:mb-20 lg:mb-32 xl:px-2 lg:px-2 md:px-4 px-4"
        >
          <div class="max-w-screen-2xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
              <!-- 左侧产品图片 -->
              <div class="flex flex-col gap-6 lg:sticky lg:top-24 self-start">
                <!-- 主图展示 -->
                <div
                  class="bg-zinc-900 rounded-lg p-8 relative overflow-hidden group aspect-square"
                >
                  <!-- 加载状态 -->
                  <div
                    v-if="isImageLoading"
                    class="absolute inset-0 flex items-center justify-center bg-zinc-800/50 z-10"
                  >
                    <div
                      class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"
                    ></div>
                  </div>

                  <!-- 主图容器 -->
                  <div class="relative w-full h-full">
                    <!-- 当前图片 -->
                    <img
                      :src="currentImage"
                      :alt="product.name"
                      class="absolute inset-0 w-full h-full object-contain rounded-lg transition-all duration-500"
                      :class="{
                        'opacity-0': isImageLoading,
                        'opacity-100': !isImageLoading,
                      }"
                      @load="handleImageLoad"
                      @error="handleImageError"
                    />

                    <!-- 预加载图片 -->
                    <img
                      v-if="preloadImage"
                      :src="preloadImage"
                      class="absolute inset-0 w-full h-full object-contain rounded-lg opacity-0"
                      @load="handlePreloadComplete"
                    />
                  </div>

                  <!-- 错误提示 -->
                  <div
                    v-if="imageError"
                    class="absolute inset-0 flex items-center justify-center bg-red-900/50 z-20"
                  >
                    <div class="flex flex-col items-center gap-2">
                      <span class="text-white"
                        >画像の読み込みに失敗しました</span
                      >
                      <button
                        @click.stop="retryLoadImage"
                        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-300"
                      >
                        再試行
                      </button>
                    </div>
                  </div>
                </div>
                <!-- 缩略图列表 -->
                <div class="flex gap-4 overflow-x-auto pb-2 scrollbar-hide">
                  <div
                    v-for="(image, index) in [
                      product.image,
                      ...(product.gallery || []),
                    ]"
                    :key="index"
                    @click="changeImage(image)"
                    class="flex-shrink-0 w-20 h-20 cursor-pointer rounded-lg transition-all duration-300 relative group aspect-square p-0.5"
                    :class="{
                      'bg-gradient-to-r from-blue-500 to-blue-600':
                        currentImage === image,
                      'hover:bg-gradient-to-r hover:from-blue-500/50 hover:to-blue-600/50':
                        currentImage !== image,
                      'opacity-50':
                        isThumbnailLoading[index] || thumbnailErrors[index],
                    }"
                  >
                    <!-- 缩略图加载状态 -->
                    <div
                      v-if="isThumbnailLoading[index]"
                      class="absolute inset-0 flex items-center justify-center bg-zinc-800/50 rounded-lg z-10"
                    >
                      <div
                        class="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent"
                      ></div>
                    </div>

                    <!-- 缩略图遮罩 -->
                    <div
                      class="absolute inset-0 bg-black/0 transition-all duration-300 rounded-lg"
                      :class="{
                        'bg-black/30': currentImage === image,
                        'group-hover:bg-black/20': currentImage !== image,
                      }"
                    ></div>

                    <img
                      :src="image"
                      :alt="`${product.name} - 画像 ${index + 1}`"
                      class="w-full h-full object-cover transition-all duration-300 rounded-lg"
                      :class="{
                        'opacity-0': isThumbnailLoading[index],
                        'opacity-100': !isThumbnailLoading[index] && !thumbnailErrors[index],
                        'group-hover:scale-110': currentImage !== image,
                      }"
                      @load="handleThumbnailLoad(index)"
                      @error="handleThumbnailError(index)"
                    />

                    <!-- 选中标记 -->
                    <div
                      v-if="currentImage === image"
                      class="absolute top-1 right-1 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center"
                    >
                      <div class="w-2 h-2 bg-white rounded-full"></div>
                    </div>

                    <!-- 缩略图错误提示 -->
                    <div
                      v-if="thumbnailErrors[index]"
                      class="absolute inset-0 flex items-center justify-center bg-red-900/50 rounded-lg"
                    >
                      <div class="flex flex-col items-center gap-1">
                        <span class="text-white text-xs">エラー</span>
                        <button
                          @click.stop="retryLoadThumbnail(index)"
                          class="px-2 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors duration-300"
                        >
                          再試行
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧产品信息 -->
              <div class="flex flex-col gap-8">
                <!-- 产品名称 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h1 class="text-white text-3xl font-medium mb-4">
                    {{ product.title || product.name }}
                  </h1>
                  <div class="text-stone-400 text-lg leading-relaxed">
                    {{ product.summary }}
                  </div>
                </div>

                <!-- 产品参数 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h2 class="text-white text-xl font-medium mb-6">製品仕様</h2>
                  <div class="grid grid-cols-1 gap-4">
                    <div
                      class="flex justify-between items-center py-2 border-b border-zinc-800"
                    >
                      <span class="text-stone-400">カテゴリー</span>
                      <span class="text-white font-medium">{{
                        product.category
                      }}</span>
                    </div>
                    <div
                      class="flex justify-between items-center py-2 border-b border-zinc-800"
                    >
                      <span class="text-stone-400">用途</span>
                      <span class="text-white font-medium">{{
                        product.usage?.join(", ")
                      }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                      <span class="text-stone-400">容量</span>
                      <span class="text-white font-medium">{{
                        product.capacities?.join(" / ")
                      }}</span>
                    </div>
                  </div>
                </div>

                <!-- 产品描述 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h2 class="text-white text-xl font-medium mb-6">产品描述</h2>
                  <div
                    class="text-stone-400 leading-relaxed space-y-4 prose prose-invert max-w-none"
                  >
                    {{ product.description }}
                  </div>
                </div>

                <div class="bg-zinc-900 rounded-lg p-6">
                  <h2 class="text-white text-xl font-medium mb-6">详细描述</h2>
                  <div
                    class="text-stone-400 leading-relaxed space-y-4 prose prose-invert max-w-none"
                  >
                    <ContentRenderer :value="product.content" />
                  </div>
                </div>

                <!-- 相关产品 -->
                <div
                  v-if="relatedProducts.length > 0"
                  class="bg-zinc-900 rounded-lg p-6"
                >
                  <h2 class="text-white text-xl font-medium mb-6">
                    {{
                      product.meta?.series && product.meta.series.length > 0
                        ? "同シリーズ製品"
                        : "関連製品"
                    }}
                  </h2>
                  <div
                    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
                  >
                    <nuxt-link
                      v-for="relatedProduct in relatedProducts"
                      :key="relatedProduct.id"
                      :to="`/products/${relatedProduct.id}`"
                      class="group"
                    >
                      <div
                        class="bg-zinc-800 rounded-lg p-4 transition-all duration-300 hover:bg-zinc-700"
                      >
                        <div
                          class="aspect-square mb-4 overflow-hidden rounded-lg"
                        >
                          <img
                            :src="relatedProduct.image"
                            :alt="relatedProduct.title || relatedProduct.name"
                            class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                          />
                        </div>
                        <h3
                          class="text-white text-lg font-medium mb-2 line-clamp-2"
                        >
                          {{ relatedProduct.title || relatedProduct.name }}
                        </h3>
                        <p class="text-stone-400 text-sm line-clamp-2">
                          {{ relatedProduct.summary }}
                        </p>
                      </div>
                    </nuxt-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 产品详情页面
 * 展示产品主图、参数和描述
 */
import { useErrorHandler } from "~/composables/useErrorHandler";
import { useRoute, useI18n, useAsyncData } from "#imports";
import { queryCollection } from "#imports";
import { ContentRenderer } from "#components";

const { error, isLoading } = useErrorHandler();
const route = useRoute();
const { locale, t } = useI18n();
const id = route.params.id as string;

// 图片状态
const currentImage = ref<string>("");
const isImageLoading = ref(true);
const isThumbnailLoading = ref<boolean[]>([]);
const imageError = ref(false);
const thumbnailErrors = ref<boolean[]>([]);
const preloadImage = ref<string | null>(null);

// 滚动跟随相关
const scrollContainer = ref<HTMLElement | null>(null);
const isSticky = ref(false);

interface Product {
  id: string;
  name: string;
  usage: string[];
  capacities: string[];
  category: string;
  categoryId: string;
  description: string;
  summary: string;
  image: string;
  gallery: string[];
  body: string;
  content?: any;
  meta?: {
    series?: string[];
    name?: string;
    title?: string;
    image?: string;
    summary?: string;
  };
  title?: string;
}

/**
 * 使用queryCollection获取产品数据
 */
const { data: productContent } = await useAsyncData(
  `product-${id}`,
  async () => {
    try {
      // 使用queryCollection从content目录获取数据
      const content = await queryCollection("content")
        .where("path", "LIKE", `/products/${locale.value}/${id}`)
        .first();
      return content;
    } catch (err) {
      console.error("Error fetching product content:", err);
      error.value = new Error(t("products.loadError"));
      return null;
    }
  }
);

/**
 * 获取分类信息
 */

const { data: categoryContent } = await useAsyncData(
  `category-${productContent.value?.meta?.categoryId}`,
  async () => {
    if (!productContent.value?.meta?.categoryId) return null;
    try {
      const content = await queryCollection("content")
        .where(
          "path",
          "LIKE",
          `/categories/${locale.value}/${productContent.value.meta?.categoryId}`
        )
        .first();
      return content;
    } catch (err) {
      console.error("Error fetching category:", err);
      return null;
    }
  },
  {
    immediate: !!productContent.value?.meta?.categoryId,
  }
);

/**
 * 使用计算属性解析产品数据
 */
const product = computed<Product | null>(() => {
  if (!productContent.value) return null;

  // 提取产品数据
  const meta = productContent.value.meta || {};

  return {
    id: id,
    name: String(meta.name || productContent.value.title || ""),
    title: String(productContent.value.title || meta.name || ""),
    usage: Array.isArray(meta.usage) ? meta.usage : [],
    capacities: Array.isArray(meta.capacities) ? meta.capacities : [],
    category: categoryContent.value?.title || "",
    categoryId: meta.categoryId || "",
    description: productContent.value.description || "",
    summary: String(meta.summary || ""),
    image: String(meta.image || ""),
    gallery: Array.isArray(meta.gallery) ? meta.gallery : [],
    body: productContent.value.body || "",
    content: productContent.value,
    meta: {
      series: Array.isArray(meta.series) ? meta.series : [],
      name: String(meta.name || ""),
      title: String(productContent.value.title || ""),
      image: String(meta.image || ""),
      summary: String(meta.summary || ""),
    },
  };
});

/**
 * 获取相关产品
 */
const { data: relatedProductsContent } = await useAsyncData(
  `related-products-${id}`,
  async () => {
    try {
      // 获取产品列表
      const content = await queryCollection("content")
        .where("path", "LIKE", `/products/${locale.value}/%`)
        .all();
      return content;
    } catch (err) {
      console.error("Error fetching related products:", err);
      return [];
    }
  }
);

/**
 * 处理相关产品数据
 */
const relatedProducts = computed(() => {
  if (!relatedProductsContent.value || !product.value) return [];

  return relatedProductsContent.value
    .filter((item: any) => item._path !== `/products/${locale.value}/${id}`)
    .map((item: any) => {
      const meta = item.meta || {};
      console.log(meta);
      return {
        id: meta.name || "",
        name: meta.name || item.title || "",
        title: item.title || meta.name || "",
        image: meta.image || "",
        summary: meta.summary || "",
      };
    })
    .slice(0, 6); // 最多显示6个相关产品
});

/**
 * 预加载下一张图片
 */
function preloadNextImage(image: string) {
  preloadImage.value = image;
}

/**
 * 处理预加载完成
 */
function handlePreloadComplete() {
  preloadImage.value = null;
}

/**
 * 处理图片加载完成
 */
function handleImageLoad() {
  isImageLoading.value = false;
  imageError.value = false;
}

/**
 * 处理图片加载错误
 */
function handleImageError() {
  isImageLoading.value = false;
  imageError.value = true;
}

/**
 * 重试加载图片
 */
function retryLoadImage() {
  isImageLoading.value = true;
  imageError.value = false;
  // 强制重新加载图片
  const img = new Image();
  img.src = currentImage.value;
  img.onload = () => {
    handleImageLoad();
  };
  img.onerror = () => {
    handleImageError();
  };
}

/**
 * 重试加载缩略图
 */
function retryLoadThumbnail(index: number) {
  // 确保index在有效范围内
  if (index < 0) {
    console.error('Invalid thumbnail index:', index);
    return;
  }

  const images = [product.value?.image, ...(product.value?.gallery || [])];
  const imageUrl = images[index];

  // 检查图片URL是否有效
  if (!imageUrl) {
    console.error('Invalid image URL for thumbnail:', index);
    thumbnailErrors.value[index] = true;
    isThumbnailLoading.value[index] = false;
    return;
  }

  console.log('Retrying thumbnail load:', { index, imageUrl });

  isThumbnailLoading.value[index] = true;
  thumbnailErrors.value[index] = false;

  // 创建新的图片对象并设置超时
  const img = new Image();
  const timeoutId = setTimeout(() => {
    console.error('Thumbnail load timeout:', index);
    handleThumbnailError(index);
  }, 10000); // 10秒超时

  img.onload = () => {
    clearTimeout(timeoutId);
    console.log('Thumbnail loaded successfully:', index);
    handleThumbnailLoad(index);
  };

  img.onerror = (error) => {
    clearTimeout(timeoutId);
    console.error('Thumbnail load error:', { index, error });
    handleThumbnailError(index);
  };

  // 设置跨域属性
  img.crossOrigin = 'anonymous';
  
  // 最后设置src以开始加载
  img.src = imageUrl;
}

/**
 * 处理缩略图加载完成
 */
function handleThumbnailLoad(index: number) {
  console.log('Thumbnail load handler called:', index);
  // 确保数组索引存在
  if (typeof isThumbnailLoading.value[index] === 'undefined') {
    console.warn('Thumbnail index out of bounds:', index);
    return;
  }
  
  // 直接修改对应索引的状态
  isThumbnailLoading.value[index] = false;
  thumbnailErrors.value[index] = false;
}

/**
 * 处理缩略图加载错误
 */
function handleThumbnailError(index: number) {
  console.log('Thumbnail error handler called:', index);
  // 确保数组索引存在
  if (typeof isThumbnailLoading.value[index] === 'undefined') {
    console.warn('Thumbnail index out of bounds:', index);
    return;
  }
  
  // 直接修改对应索引的状态
  isThumbnailLoading.value[index] = false;
  thumbnailErrors.value[index] = true;
}

/**
 * 切换图片
 */
function changeImage(image: string | undefined) {
  if (image && image !== currentImage.value) {
    isImageLoading.value = true;
    imageError.value = false;
    preloadNextImage(image);
    currentImage.value = image;
  }
}

// 页面加载时初始化状态
onMounted(() => {
  // 设置当前图片
  if (product.value?.image) {
    currentImage.value = product.value.image;
  }

  // 初始化缩略图加载状态数组
  const galleryLength = (product.value?.gallery?.length || 0) + 1;
  isThumbnailLoading.value = new Array(galleryLength).fill(true);
  thumbnailErrors.value = new Array(galleryLength).fill(false);
  
  // 预加载所有缩略图
  const images = [product.value?.image, ...(product.value?.gallery || [])];
  images.forEach((image, index) => {
    if (image) {
      const img = new Image();
      img.onload = () => handleThumbnailLoad(index);
      img.onerror = () => handleThumbnailError(index);
      img.src = image;
    }
  });
  
  console.log('Initialized thumbnail states:', {
    loading: isThumbnailLoading.value,
    errors: thumbnailErrors.value
  });

  // 添加滚动监听
  scrollContainer.value = document.querySelector('.max-w-screen-2xl');
  if (scrollContainer.value) {
    window.addEventListener('scroll', handleScroll, { passive: true });
  }
});

// 清理滚动监听
onUnmounted(() => {
  if (scrollContainer.value) {
    window.removeEventListener('scroll', handleScroll);
  }
});

// 处理滚动事件
function handleScroll() {
  if (!scrollContainer.value) return;
  
  const containerRect = scrollContainer.value.getBoundingClientRect();
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  
  // 当容器顶部距离视窗顶部小于100px时，启用sticky
  isSticky.value = containerRect.top < 100;
}

// SEO优化
useHead(() => ({
  title: `${product.value?.name || "产品详情"} - Hanye`,
  meta: [
    {
      name: "description",
      content: product.value?.description || "产品详情页面",
    },
  ],
}));
</script>

<style lang="scss" scoped>
/* 隐藏滚动条但保持滚动功能 */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* 图片过渡动画 */
.main-image {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 缩略图悬停效果 */
.thumbnail-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-item:hover {
  transform: translateY(-2px);
}

/* 缩略图选中效果 */
.thumbnail-item.selected {
  transform: scale(1.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 产品信息卡片效果 */
.info-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 滚动跟随效果 */
.lg\:sticky {
  position: sticky;
  top: 6rem; /* 96px */
  transition: all 0.3s ease;
  z-index: 10;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

@media (max-width: 1024px) {
  .lg\:sticky {
    position: relative;
    top: 0;
    max-height: none;
  }
}
</style>